<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../elementui/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/register.css" />
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../elementui/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>
<style>
    .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        right: 94px;
    }
</style>
<body>
    <div id="app">
        <div class="pos">
            <div class="login">
                <span class="close iconfont icon-close"></span>
                <img src="../../img/login/qichezulin.png" alt="">
                <ul>
                    <li></li>
                    <li style="margin-bottom: 30px;font-size: 16px;color: red;" v-html="msg"></li>
                    <li></li>
                </ul>
                <form action="" method="post" id="form">
                    <input type="text"  placeholder="请输入姓名" v-model="member.memberName" @blur="validateName(member.memberName)">
                    <input type="text" placeholder="请输入您的手机号" v-model="member.phoneNumber" @blur="validatePhone(member.phoneNumber)">
                    <el-form>
                        <el-form-item >
                            <el-radio-group v-model="member.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                    <input type="password"  placeholder="请再次输入密码" v-model="member.password" @blur="validatePassword(member.password)">
                    <input type="text"  placeholder="请输入邮箱" v-model="member.email" @blur="validateEmail(member.email)">
                    <input type="text" class="yanzhen" placeholder="请输入验证码" v-model="member.verCode" @blur="validateVerCode(member.verCode)">
                    <span class="yanzhenma">{{code}}</span>
                    <div class="clear"></div>
                    <div class="loginbtn" style="margin-left: 110px;line-height: 40px;" @click="submitForm()">注册</div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            code:"",//生成验证码
            member:{
                memberName:"",
                phoneNumber:"",
                password:"",
                email:"",
                sex:"",
                verCode:""
            },
            msg:"",//错误消息提示
            flag1:false,//姓名
            flag2:false,//手机号
            flag3:false,//密码
            flag5:false,//邮箱
            flag4:false,//验证码


        },
        methods: {
            initCode(){
                var str="";
                var source="0123456789abcdefghijklmnopqrstuvwxyz";
                //生成4位的验证码
                for(var i=0;i<4;i++){
                    var num = Math.floor(Math.random()*source.length);
                    str+=source[num];
                }
                this.code=str;
            },
            validateName(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="用户名不能为空";
                    return;
                }
                this.flag1=true;
            },
            validateEmail(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="邮箱不能为空";
                    return;
                }
                this.flag5=true;
            },
            //验证手机号
            validatePhone(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="手机号不能为空";
                    return;
                }
                var reg = /^1[3|4|5|6|7|8][0-9]{9}$/;
                if(!reg.test(val)){
                    this.msg="手机号格式不正确";
                    return;
                }
                axios.get("/carOrder/selectPhone/"+val).then(resp=>{
                    if(resp.data.flag){
                        this.msg = "该手机号已被注册";
                    }else{
                        
                        this.msg="<font style='color: green;'>验证通过</font>";
                        this.flag2=true;

                    }
                })
            },
            validatePassword(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="密码不能为空";
                    return;
                }
                this.flag3=true;
            },
            validateVerCode(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="验证码不能为空";
                    return;
                }
                //验证码正确性验证
                if(this.code!=val){
                    this.msg="验证码不正确";
                    return;
                }
                this.flag4=true;
            },
            submitForm(){
                if(this.flag1&&this.flag2&&this.flag3&&this.flag4){
                    axios.post("/carOrder/registerMember",this.member).then(resp =>{
                        if(resp.data.flag){
                            alert("注册成功");
                            location.href="login.html";
                        }else{
                            location.href="register.html";
                        }
                    })
                }else{
                    alert("表单验证失败")
                }
            }

        },
        created() {
            this.initCode();
        },

    })
</script>


</html>